<template>
    <div class="detail_box" v-if="detailData!==null">
        <div class="detail_item">
            <div class="left_item">
                <img style="width: 90%;height: 90%;" :src="require('../../assets/images/' + detailData.coverImg)" />
            </div>
            <div class="right_item">
                <div class="goodname">{{ detailData.goodsName }}</div>
                <div class="goodInfo">{{ detailData.goodsInfo }}</div>
                <div class="spec">
                    <label style="width: 15%;text-align: center;">规格</label>
                    <el-select
                    class="spec_option"
                    :placeholder="detailData.specficMap[choose].specValue"
                    size="large"
                    style="width: 300px;"
                    @change="changeOption"
                    >
                    <el-option
                        v-for="(item,index) in detailData.specficMap"
                        :key="index"
                        :label="item.specValue"
                        :value="index"
                    />
                    </el-select>
                </div>
                <div class="priceandnum">
                    <div style="padding: 0 15px;">￥{{ detailData.specficMap[choose].price }}</div>
                    <el-input-number v-model="num" :min="1" :max="detailData.specficMap[choose].stockNum" @change="handleChange" />
                </div>
                <div class="btn_box">
                    <button @click="addCart">加入购物车</button>
                    <button @click="payment">立即购买</button>
                </div>
            </div>
        </div>
        <div class="detail_txt">
            产品详情：
            <div>{{detailData.goodsInfo}}</div>
        </div>
        <div class="tips">客服公众号:YCLL0001</div>
    </div>
</template>

<script>
import { addCart, getGoodsByGoodsId } from '@/utils/api/goods';

export default {
    data(){
        return {
            detailData:null,
            num:1,
            choose:null
        }
    },
    watch:{
        detailData(newval,oldval){
            console.log(newval,oldval)
            this.choose=newval!==null?Object.keys(this.detailData.specficMap)[0]:null
        }
    },
    created(){
        const that=this
        getGoodsByGoodsId(this.$route.query.id).then(data=>{
            that.detailData=data
        })
    },
    methods:{
        changeOption(e){
            this.choose=e
            this.num=1
        },
        addCart(){
            addCart({specId:this.detailData.specficMap[this.choose].specId,number:this.num},this.$store.state.user.token)
        },
        payment(){
            
        }
    }
}
</script>

<style>
.detail_item{
    height: 450px;
    display: flex;
    flex-direction: row;
}
.detail_item .left_item{
    width: 40%;
    /* border: 1px solid; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.detail_item .right_item{
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
}
.right_item .goodname,.goodInfo{
    font-size: 25px;
    margin: 10px 0;
}
.right_item .goodname{
    font-weight: bold;
}
.right_item .spec{
    display: flex;
    flex-direction: row;
    margin: 40px 0;
    /* border: 1px solid; */
    align-items: center;
}
.right_item .priceandnum{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 25px;
    margin-bottom: 30px;
}
.right_item .btn_box{
    /* margin: 0 20px; */
    margin-left: 40px;
}
.btn_box button{
    margin: 0 20px;
    padding: 10px;
    color: #fff;
    background-color: black;
}
.spec .spec_option{
    flex: 1;
    margin-right: 100px;
}
.detail_txt{
    font-size: 25px;
    margin: 20px;
}
.tips{
    margin: 0 20px;
    margin-top: 40px;
    color: #bbb;
}
</style>